<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding:0;
		}
		html,body{
			 font-family:Arial,Helvetica,sans-serif;
		}
		li{
			list-style: none;
		}
		img{
			border:none;display: block
		}
		.box{
			width: 1024px;margin: 50px auto;
		}
		.imgFileUploade{
			width: 100%;padding: 10px;
		}
		.imgFileUploade .header{
			height: 50px;width: 100%;line-height:50px;
		}
		.imgFileUploade .header span{
			display: block;float:left;
		}
		.imgFileUploade .header span.imgTitle{
			line-height:50px;
		}
		.imgFileUploade .header span.imgTitle b{
			color:red;margin:0 5px;line-height: 57px;display: block;float: right;font-size: 20px;
		}
		.imgFileUploade .header span.imgClick{
			width: 50px;height: 50px;margin-left: 10px;cursor: pointer;
			background: url(img/addUpload.png) no-repeat center center;background-size:cover; 
		}
		.imgFileUploade .header span.imgcontent{
			color:#999;margin-left:120px;line-height: 50px;
		}
		.imgFileUploade .imgAll{
			width: 100%;    margin-top: 5px;
		}
		.imgFileUploade .imgAll ul:after{ 
				visibility: hidden;  display: block; font-size: 0; content: ".";  clear: both; height: 0
		} 
		.imgFileUploade .imgAll li{
			width: 100px;height: 100px;border:solid 1px #ccc;margin:8px 5px;float: left;position: relative;box-shadow: 0 0 10px #eee;
		}
		.imgFileUploade .imgAll li img{
			position: absolute;top:0;left:0;width: 100%;height: 100%;display: block;
		}
		.delImg{
			position: absolute;top:-10px;right:-7px;width: 22px;height: 22px;background: #000;border-radius: 50%;display: block;text-align:  center;line-height: 22px;color:#fff;font-weight: 700;font-style:normal;cursor: pointer;
		}
		.box,.box2,.box3,.box4{
			border:solid 1px #ccc;
		}
	</style>
</head>
<body>
	<!--下列是供插件产生多图上传标签用的-->
	<div class="box2" style="width:700px;margin:50px auto"></div>
	
	<div style="text-align:center; vertical-align:middel;"><input type="button" id="submit" value="提交多张图片" onclick="moreImgCompression()"/></div>
	
</body>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/imgFileupload.js"></script>
<script type="text/javascript" src="js/compressimg.js"></script>
<script type="text/javascript">
var imgFile = new ImgUploadeFiles('.box2',function(e){
	this.init({
		MAX : 5,
		MH : 20000, //像素限制高度
		MW : 20000, //像素限制宽度
		callback : function(arr){
			//console.log(arr)
		}
	});
});
	
//多图片压缩
function moreImgCompression(){
	
	var length = $(".imgAll img").length;
	var i = 0;
	var count = 0;
	if(length <= 0) {
		alert("请选择文件！")
		return;
	}
	
	var p = new Promise(function(resolve, reject){ 
		var formData = new FormData();
		for(var j = 0; j < length; j ++) {
			var imgFile = dataURLtoFile($(".imgAll img").eq(j).attr("src"));//将base64转为file格式
			//判断是否大于500k,大小可以根据实际需求定
			if(imgFile.size/1024 > 500) {
				photoCompress(imgFile, {
			        quality: 0.2	
			    },function(base64Codes){
			  	  	var img = dataURLtoFile(base64Codes,imgFile.name);
			  	  	formData.append("imgFiles",img);
			  	  	i ++ ;
			  	  	if(i == length) {
						resolve(formData);
					}
			    });	
			}else {
				formData.append("imgFiles",imgFile);
				i ++;
				if(i == length) {
					resolve(formData);
				}
			}
		}
	}).then(function(data) {
		var formData = data;
		$.ajax({
				type:"POST",
				url: getProtocolAndHost() + "/PicCompressionController.do?imgsComUpload",
				data:formData,
				processData: false,
				contentType: false,
				success: function (data) {
					alert("提交成功")	
				},
				error: function(a,b,c) {
					alert("图片上传异常！")	
				}
			});
	})
}

//端口控制方法
function getProtocolAndHost(){
	var protocolStr = document.location.protocol;//协议 http或https
	var host;
	var addressURLs;
	var port = location.port;
 	host= location.hostname;//location.host;//127.0.0.1:8080 主机+端口
 	addressURLs=protocolStr+"//"+host+":8080"+"/picCompression";
	return addressURLs;
}
	
</script>
</html>